<template>
  <Dialog
    :close-on-click-modal="closeOnClickModal"
    :close-on-press-escape="closeOnPressEscape"
    :append-to-body="appendToBody"
    v-bind="$attrs"
    v-on="$listeners"
    ref="dialog_ref"
    class="dialog_wrap"
    :class="{
      'fixed_dialog': isFullscreen || fullScreen
    }"
  >
    <!-- 一个全屏的按钮 -->
    <div class="full_screen_wrap" v-if="$attrs.showFull">
      <svg-icon
        :icon-class="isFullscreen?'exit-fullscreen':'fullscreen'"
        @click="click"
      />
    </div>
    <slot
      name="title"
      v-if="$slots.title"
    ></slot>
    <el-scrollbar>
      <slot></slot>
    </el-scrollbar>
    <div
      class="dialog_footer_dialog"
      v-if="$slots.footer"
    >
      <slot name="footer"></slot>
    </div>
  </Dialog>
</template>
<script>
import { Dialog } from "element-ui";
export default {
  components: {
    Dialog
  },
  props: {
    closeOnClickModal: {
      type: Boolean,
      default: false
    },
    closeOnPressEscape: {
      type: Boolean,
      default: false
    },
    appendToBody: {
      type: Boolean,
      default: true
    },
    fullScreen: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      isFullscreen: false
    };
  },
  mounted() {
    this.isFullscreen = this.fullScreen;
    this.$refs.dialog_ref.$el.removeAttribute("title");
  },
  methods: {
    /**
     * @name click
     * @description 点击切换是否全屏
     * @author cjs1992
     * @date 2020-05-11 20:41:55
     */
    click() {
      this.isFullscreen = !this.isFullscreen;
    }
  }
};
</script>
<style lang="scss" scoped>
.dialog_wrap {
  >>> {
    .el-dialog {
      position: relative;
    }
  }
}
.full_screen_wrap {
  position: absolute;
  right: 60px;
  top: 24px;
  cursor: pointer;
  z-index: 3;
}
.fixed_dialog {
  >>> {
    .el-dialog {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin-top: 0 !important;
      width: 100% !important;
      padding: 60px 0;
      box-sizing: border-box;
      .el-dialog__header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 2;
        border-bottom: 1px solid #e0e0e0;
      }
      .el-dialog__body {
        padding: 0;
        height: 100%;
        .el-scrollbar {
          height: 100%;
          .el-scrollbar__bar {
            opacity: 1;
            width: 8px;
          }
          .el-scrollbar__wrap {
            overflow-x: auto;
            padding: 0 20px;
          }
        }
      }
    }
  }
  .dialog_footer_dialog {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10px 0;
    height: 60px;
    border-top: 1px solid #e0e0e0;
  }
}
</style>
